<template>
    <div style="background-color: #f5f5f5;padding: 10px;display: flex;justify-content: center;align-items: center;">
      <a-card title="我的词库" class="card" style="width: 400px;margin: 10px" >
        <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item) in state.word" :key="item" :title="`词库名： ${item.wordname}`" :label="`上传用户：${item.wordowner}`"
             name="123" style="margin-top: 5px;" >
             <van-button type="primary" style="margin: 10px;" :name="`${item.wordname} ${item.wordowner}`" @click="choseWord">选择</van-button>
          </van-cell>
        </van-list>
  </a-card>
  <a-card title="词库工坊" class="card" style="width: 400px;margin: 10px" >
        <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item) in state.publicWord" :key="item" :title="`词库名： ${item.wordname}`" :label="`上传用户：${item.wordowner}`"
             name="123" style="margin-top: 5px;" >
             <van-button type="primary" style="margin: 10px;" :name="`${item.wordname} ${item.wordowner}`" @click="choseWord">选择</van-button>
          </van-cell>
        </van-list>
  </a-card>
    </div>
    <div style="background-color: #f5f5f5;padding: 10px;display: flex;justify-content: center;align-items: center;">
      <van-button type="primary" style="margin: 10px;" @click="createRoom">新建房间</van-button>
      <van-button type="primary" style="margin: 10px;" @click="createWord">新建词库</van-button>
    </div>
</template>
    <script>
    import {  defineComponent,reactive } from 'vue';
    import { useRouter } from 'vue-router';
    import axios from 'axios';
    import url from '@/main';
    //import {message}from 'ant-design-vue'
    export default defineComponent({
      name: 'App',
      components: {
      },
      setup(){
        const router=useRouter()
        //console.log(store.rooms)
        const state = reactive({
          loading:false,
          finished:false,
          word:[],
          publicWord:[]
          //list:[1,2,3]
        });
        //axios.post('http://47.101.35.155:3000/wordstorage', {username:localStorage.getItem('username')})
        axios.post('http://'+url+':3000/wordstorage', {username:localStorage.getItem('username')})
        .then(function (response) {
          console.log(response.data)
          state.word = response.data.words
          state.publicWord = response.data.publicWords
        })
        const onLoad = () => {
            state.loading = false
        };
        const choseWord = (e) => {
          const name = e.target.getAttribute('name')
          const arr = name.split(" ");
          //axios.post('http://47.101.35.155:3000/choseword', { wordname: arr[0], wordowner: arr[1] ,username:localStorage.getItem('username')})
          axios.post('http://'+url+':3000/choseword', { wordname: arr[0], wordowner: arr[1] ,username:localStorage.getItem('username')})
            .then(function (response) {
            localStorage.setItem('wordcontent',response.data.wordcontent)
            console.log(localStorage.getItem('wordcontent'))
        })
          router.push('/roomCreate')
        }
        const createRoom = ()=>{
            router.push('/roomCreate')
        };
        const createWord = ()=>{
            router.push('/wordCreate')
        };

        return{
          state,
          onLoad,
          router,
          createRoom,
          choseWord,
          createWord
        }
      }
    })
    </script>
    
    <style lang="css">
    .app {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .card{
      text-align:center;
      width: 2000px;
    }
    
    .input {
      margin-right: 10px;
      width: 200px;
    }
    .password {
      margin-right: 10px;
      width: 100px;
    }
    .button {
      margin-top: 10px;
    }
    
    </style>